<template>
  <div id="pie"></div>
</template>

<script>
export default {
  name: 'pie',
  data() {
    return {
      data: [
        { value: 1048, name: '原生电子文件' },
        { value: 288, name: '扫描件' },
      ]
    };
  },
  mounted() {
    this.initEcharts();
  },
  methods: {
    initEcharts() {
      //数据汇总算法
      const dataNum = this.data.reduce((pre, cur) => {
        return pre * 1 + cur.value * 1;
      }, 0);
      let zong = parseFloat(dataNum);
      const option = {
        //使用标题来显示数据总和
        title: {
          x: '45%', //X坐标
          y: '32%', //Y坐标
          text: '   总量', //主标题
          subtext: zong, //副标题
          textStyle: {
            //标题样式
            fontSize: 18,
            fontWeight: 'bolder',
            color: '#aaa',
            transform: 'translate(-50%,-70%)',
            marginTop: '-50%',
            marginLeft: '-70%'
          },
          subtextStyle: {
            //副标题样式
            fontSize: 26,
            fontWeight: 'bolder',
            color: '#fff',
            formatter: '',
            marginTop: '-55%',
            marginLeft: '-70%',
            transfrom: 'translate(-45%,-75%)'
          }
        },
        //提醒条
        tooltip: {
          trigger: 'item',
          formatter: ' {b}: {c}'
        },
        //图例
        legend: {
          top: '20%',
          orient: 'vertical',
          right: '10%',
          textStyle:{
            color:'#fff',
            fontSize:14
          }
        },
        //标签样式
        label: {
          formatter: '{per|{d}%} ',
          rich: {
            per: {
              color: '#fff',
            }
          }
        },
        //内容
        series: [
          {
            center: ['50%', '40%'], //图表位置
            type: 'pie',
            radius: ['50%', '70%'], //圆环设置
            data: this.data, //数据
            //环形图数据颜色设置
            itemStyle: {
              normal: {
                borderColor: '#fff',
                borderWidth: 3,
                color: function(colors) {
                  var colorList = [
                    '#3BEDBE',
                    '#0BA8DD'
                  ];
                  return colorList[colors.dataIndex];
                }
              }
            },

            label: {
              normal: {
                show: true,
                color: '#fff',
                fontSize:16,
                formatter: '{active|{d}%}' ,

              }
            }
          }
        ]
      };
      const myChart = this.$echarts.init(document.getElementById('pie'));
      myChart.setOption(option);
    }
  }
};
</script>

<style scoped>
#pie {
  padding: 20px 0;
  width: 90%;
  height: 95%;
  margin: 30px 5%;
}
</style>
